/**
 * Created by Administrator on 2016/8/3.
 */
//全部商品分类函数
//第一步，永远是选择要操作的元素
var oNav = document.querySelector('#nav');
var obutton = document.querySelector('#nav button');
var aLi = document.querySelectorAll('#nav ul li');
var aSubNav = document.querySelectorAll('#nav ul li .subnav');
var aEm = document.querySelectorAll('.arrow');
var timer = null;
var oSubNav = null;
var oEm = null;
//第二步的话，就要考虑循环发生事件对象，给他们添加回调函数
for(var i=1;i<aLi.length;i++){
    //首先把下标记录一下
    aLi[i].index = i;
    //计算下当前subnav的下标

    //事件
    aLi[i].onmouseover = function(){
        //找到当前发生事件li下面的subnav
        oSubNav = aSubNav[this.index -1];
        //找到那个小图标
        oEm = aEm[this.index - 1];

        for(var i=0;i<aSubNav.length;i++){
            aSubNav[i].style.display = 'none';
        }
        //让当前的li下边的那个subnav显示
        oSubNav.style.display = 'block';
//            obutton.style.color='white';
        //清除下计时器
        clearTimeout(timer);
        //位置判断一下
        oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ?
            //居左
            oSubNav.style.left = this.offsetLeft + 'px' :
            //居右
            oSubNav.style.right = '0';

        //em那个小图标
        oEm.style.left = 50 + 'px';
    }
    //事件
    aLi[i].onmouseout = function(){
        //离开的时候
        timer = setTimeout(function(){
            oSubNav.style.display = 'none';
        },300)
    }
}

$(function(){
    $('.last figure',function(){

    })
})

$(function(){
    $('.box1 .icon-infomation5').addClass('animated bounce');
    setTimeout(function(){
        $('.box1 .icon-infomation5').removeClass('bounce');
    }, 1000);
});

